<template>
  <div class="app">
    <div class="title">
      <div class="sho_car_el_center">
        <div class="logo_img">
          <a href="http://localhost:8080/#/"
            ><img src="../assets/images/logo/xiaobaishop_1.jpg"
          /></a>
        </div>
        <div class="title_text">
          <span>欢迎注册</span>
        </div>
        <div class="back_login">
          <span
            >已有账号? <a href="http://localhost:8081/#/login">请登录</a></span
          >
        </div>
      </div>
    </div>
    <!-- 填充位置 -->
    <div class="nul_box"></div>
    <div class="regist_body">
      <div class="regist_center">
        <div class="regist_center_align">
          <div class="regist_center_align_center">
            <el-steps :active="active" align-center>
              <el-step title="步骤1" description="验证邮箱"></el-step>
              <el-step title="步骤2" description="填写账号信息"></el-step>
              <el-step title="步骤3" description="注册成功"></el-step>
            </el-steps>
          </div>
        </div>
        <div class="regist_title_success_box" v-if="img_state">
          <span class="regist_title_success">注册成功！</span>
        </div>
        <div class="regist_center_input">
          <el-form
            :model="register"
            status-icon
            :rules="registerRules"
            ref="register"
          >
            <div class="regist_center_input_center">
              <div class="regist_center_step">
                <div class="big_box">
                  <div class="regist_center_step_input">
                    <!-- 输入密码 -->
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="请输入密码"
                      placement="right-start"
                    >
                      <div class="regist_center_pwd_input" v-show="pwd_state">
                        <el-form-item prop="password">
                          <el-input
                            type="password"
                            v-model="register.password"
                            placeholder="输入密码"
                          ></el-input>
                        </el-form-item>
                      </div>
                    </el-tooltip>
                    <!-- 注册成功图标 -->
                    <div class="regist_success_img" v-show="img_state">
                      <img
                        src="../assets/images/regist_success_img/注册成功.png"
                      />
                    </div>
                    <!-- 再次输入密码 -->
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="请再次输入同样的密码"
                      placement="right-start"
                    >
                      <div class="regist_center_pwd_input" v-show="pwd_state">
                        <el-form-item prop="passwordAgain">
                          <el-input
                            type="password"
                            v-model="register.passwordAgain"
                            autocomplete="off"
                            placeholder="再次输入密码"
                          ></el-input>
                        </el-form-item>
                      </div>
                    </el-tooltip>
                    <el-tooltip
                      class="item"
                      effect="dark"
                      content="例:xxx@163.com"
                      placement="right-start"
                    >
                      <el-form-item prop="email">
                        <el-input
                          type="email"
                          v-model="register.email"
                          v-if="email_state"
                          placeholder="请输入邮箱"
                        ></el-input>
                      </el-form-item>
                    </el-tooltip>
                  </div>

                  <div class="regist_center_step_button">
                    <el-button @click="subCode" v-show="Verification_state"
                      >点击按钮进行验证</el-button
                    >

                    <input
                      placeholder="请输入邮箱验证码"
                      v-if="input_state"
                      v-model="code"></input>
                  </div>
                </div>

                <div class="regist_center_step_button_next">
                  <el-button @click="registStep">{{ step }}</el-button>
                </div>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
    <div class="regist_bottom">
      <bottom />
    </div>
  </div>
</template>

<script>
import bottom from "@/components/bottom.vue";
export default {
  components: {
    bottom,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.register.password !== "") {
          this.$refs.register.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.register.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      step: "下一步",
      active: 0,
      Verification_state: true,
      input_state: false,
      pwd_state: false,
      email_state: true,
      img_state: false,
      sendBtn: "发送邮件",
      disabled: false,
      registerRules: {
        password: [{ validator: validatePass, trigger: "blur" }],
        passwordAgain: [{ validator: validatePass2, trigger: "blur" }],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: ["blur", "change"],
          },
        ],
      },
      register: {
        email: "",
        password: "",
        passwordAgain: "",
        code: "",
        nicname: "",
        number: "",
      },
    };
  },
  methods: {
    registStep() {
      function isMail(str) {
        var reg =
          /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
        return reg.test(str);
      }
      var flag = false;
      console.log(isMail(this.isMail));
      if (this.active == 0) {
        if (!isMail(this.register.email)) {
          this.$message.error("请输入正确的邮箱地址");
          return;
        }
        if (this.code == null) {
          this.$message.error("请输入验证码");
          return;
        }
        this.active++;
      }

      if (this.active == 1) {
        this.input_state = false;
        this.Verification_state = false;
        this.pwd_state = true;
        this.email_state = false;
        if (this.register.password != this.register.passwordAgain) {
          this.$message.error("两次密码不一致");
          return;
        }
        if (this.register.password == null || this.register.password == "") {
          this.$message.error("密码不能为空!");
          return;
        }

        this.active++;
        console.log(this.register.password);
      }
      if (this.active == 2) {
        this.input_state = flag;
        this.Verification_state = flag;
        this.pwd_state = flag;
        this.email_state = flag;
        this.img_state = !flag;
        this.step = "完成";
        this.active++;
        return;
      }

      if (this.active == 3) {
        this.$router.push("/login");
        return;
      }
    },
    subCode() {
      if (this.register.email == "") {
        this.$message.error("请输入邮箱");
        this.Verification_state = true;
      } else {
        this.Verification_state = false;
        this.input_state = true;
      }
    },
    // sendEmail() {
    //   var times = 5;
    //   this.disabled = true;
    //   var timeout = setInterval(() => {
    //     if (times == 0) {
    //       this.sendBtn = "发送邮件";
    //       this.disabled = false;
    //       clearInterval(timeout);
    //       return;
    //     }
    //     this.sendBtn = "剩余" + times + "秒";
    //     times--;
    //   }, 1000);
    // },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
  },
};
</script>

<style>
.regist_center_step_button input{
  -webkit-appearance: none;
    background-color: #FFF;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
    background-image: none;
}
.regist_title_success_box {
  width: 200px;
  height: 60px;
  margin: 0 auto;
  text-align: center;
  line-height: 60px;
}
.regist_title_success {
  width: 100px;
  height: 60px;
  font-size: 30px;
  /* 加粗 */
  font-weight: bold;
  margin-left: 21px;
}
.regist_success_img img {
  width: 120px;
  height: 120px;
  /* 居中 */
  display: block;
  margin: 0 auto;

  /* 去除图片的锯齿 */
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.regist_success_img {
  width: auto;
  height: auto;
  /* 居中 */
  display: block;
  margin: 0 auto;
}
.regist_center_pwd_input input {
  width: 400px;
  height: 50px;
}
.regist_center_pwd_input {
  width: 400px;
  height: 50px;
  margin-top: 20px;
}
.title_text span {
  font-size: 30px;
  /* font-weight: bold; */
  /* 垂直居中 */
  line-height: 80px;
}
.title_text {
  width: 260px;
  height: 80px;
  float: left;
}
.back_login a {
  color: black;
}
.back_login a:hover {
  text-decoration: underline;
  color: #958a7e;
}
.back_login span {
  line-height: 80px;
}
.back_login {
  width: auto;
  height: 80px;
  float: right;
}
.regist_center_step_button_next button {
  width: 400px;
  height: 50px;
}
.regist_center_step_button_next {
  width: 400px;
  height: 50px;
  margin-top: 50px;
}
.regist_center_step_button input {
  width: 400px;
  height: 50px;
}
.regist_center_step_button button {
  width: 400px;
  height: 50px;
}
.regist_center_step_button {
  width: 400px;
  height: 50px;
  margin-top: 20px;
}
.regist_center_step_input input {
  height: 50px;
}
.regist_center_step_input {
  width: 400px;
  height: 50px;
  margin-top: 20px;
}
.regist_center_step {
  width: 400px;
  height: 100%;
  margin: 0 auto;
}
.regist_center_input_center {
  width: 700px;
  height: calc(100% - 100px);
  margin: 0 auto;
}
.regist_center_input {
  width: 100%;
  height: calc(100% - 120px);
}
.regist_center_align_center {
  width: 700px;
  height: 100%;
  margin: 0 auto;
  /* background-color: red; */
}
.regist_center_align {
  width: 100%;
  height: 120px;
}
.nul_box {
  width: 500px;
  height: 100px;
}
.regist_center {
  width: 1200px;
  height: 100%;
  background-color: #ffffff;
  margin: 0 auto;
}
.regist_body {
  width: 100%;
  height: 600px;
}
.sho_car_el_center {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  /* background-color: #a0a0a0; */
  position: relative;
}
.logo_img img {
  width: 110px;
  height: 80px;
}

.logo_img {
  width: 110px;
  height: 80px;
  float: left;
}
.title {
  width: 100%;
  height: 80px;
  font-size: 20px;
  background-color: white;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  /* display: flex;
  justify-content: center;
  align-items: center; */
  position: relative;
}
</style>